class Product {
    constructor() {
        this.showDetails();
        this.$('.join .join_car').addEventListener('click', this.joinCar)
    }
    showDetails() {
        // 获取商品id
        let goodsId = localStorage.getItem('goodsId');
        // console.log(goodsId);

        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

        // 发送ajax请求，渲染数据
        // let param = `id=${goodsId}`;
        axios.get('http://localhost:8888/goods/item?id=' + goodsId).then(({ status, data }) => {
            // console.log(status, data);

            this.$('.w .brief_le').innerHTML = `<h3>${data.info.title}</h3>`;

            this.$('.detail_le .small').innerHTML = `<img src="${data.info.img_big_logo}" alt="">
            <div class="mask"></div>`;

            this.$('.detail_le .big').innerHTML = `<img src="${data.info.img_big_logo}" id="img" alt="">`;

            this.$('.detail_ri .parameter').innerHTML = `<h2>${data.info.title}</h2>
            <p class="orange">「付款前1000名赠价值99元小米定制T恤」</p>
            <p class="gray">VC液冷散热 / 120Hz旗舰变速金刚屏 / 67W 闪充 5000mAh 大电池 /JBL 立体声双扬声器 / UFS 3.1 /
                6400万AI三摄
                / 多功能NFC 3.0
                / 旗舰级设计 艺术感工艺</p>
            <p class="orange">小米自营</p>
            <span class="orange">${data.info.current_price}元</span>`;

            this.$('.detail_ri .sum').innerHTML = `<p class="sum1">${data.info.title}</p>
            <p>${data.info.current_price}元</p>
            <h2 class="orange">总计：${data.info.current_price}元</h2>`;

            // 跳转到详情页
            // location.assign('../html/product.html')
            //放大镜实现
            // 1 获取节点
            let box = document.querySelector('#detail')
            let mask = document.querySelector('.mask')
            let big = document.querySelector('.big')
            let bigImg = document.querySelector('#img')
            let small = document.querySelector('.small');
            //  console.log(bigImg);
            // 2 给small绑定鼠标移入事件
            small.onmouseover = function () {
                // 2-1 显示小黄块和大图
                // console.log(1111);
                mask.style.display = 'block';
                big.style.display = 'block';
            }
            // 3 给small 绑定鼠标移出事件
            small.onmouseout = function () {
                mask.style.display = 'none';
                big.style.display = 'none';
                // console.log(111);
            }
            // 获取box相对于文档的坐标
            let boxL = box.offsetLeft,
                boxT = box.offsetTop;
            // console.log(boxL, boxT);

            // 4 设置鼠标移动事件
            small.onmousemove = function (eve) {
                // 计算小黄块的最大left和top值
                let maxT = small.offsetHeight - mask.offsetHeight;
                // console.log(smallObj.offsetHeight, maskObj.offsetHeight);

                let maxL = small.offsetWidth - mask.offsetWidth;
                // console.log(smallObj.offsetWidth, maskObj.offsetWidth);
                // 4-1 鼠标的相对于文档坐标
                let px = eve.pageX;
                let py = eve.pageY;
                // console.log(px, py);
                // 4-2 计算小黄块的左边
                let tmpX = px - boxL - mask.offsetWidth / 2;
                let tmpY = py - boxT - mask.offsetHeight / 2;
                // 4-3 计算边界值
                if (tmpX < 0) tmpX = 0;
                if (tmpY < 0) tmpY = 0;
                // console.log(tmpY, maxT);
                // 右侧和下侧边界
                if (tmpX > maxL) tmpX = maxL;
                if (tmpY > maxT) tmpY = maxT;
                mask.style.left = tmpX + 'px'
                mask.style.top = tmpY + 'px'
                // 求出大图能够移动的最大位置
                let bImgPosL = big.offsetWidth - bigImg.offsetWidth;
                let bImgPosT = big.offsetHeight - bigImg.offsetHeight;
                // console.log(bImgPosL, bImgPosT);
                // console.log(bImgPosL, bImgPosT);
                // 计算大图的实时位置
                // 小黄块实时位置/小黄块最大值==大图的实时位置/大图移动的最大距离
                let bImgTmpL = tmpX / maxL * bImgPosL;
                let bImgTmpT = tmpY / maxT * bImgPosT;
                //设置大图的位置
                bigImg.style.left = bImgTmpL + 'px';
                bigImg.style.top = bImgTmpT + 'px';
            }
        })
    }

    // 加入购物车
    joinCar() {
        let token = localStorage.getItem('token');

        let goodsId = localStorage.getItem('goodsId');

        let userId = localStorage.getItem('user_id');



        // 设置编码方式
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

        // 设置请求头
        axios.defaults.headers.common['Authorization'] = token;
        // 发送ajax , 加入购物车
        let param = `id=${userId}&goodsId=${goodsId}`;
        axios.post('http://localhost:8888/cart/add', param).then(res => {
            // console.log(res);
            let { status, data } = res;
            // console.log(status, data);
            if (status != 200) return;
            if (data.code == 1) {
                // 弹出框
                layer.msg('是否去结算？', {
                    time: 20000, //20s后自动关闭
                    btn: ['是', '否'],
                    yes(index) {
                        layer.close(index);
                        location.assign('../html/cart.html');
                    }
                })
            } else {
                layer.msg('未检测到用户信息,是否去登录?', {
                    time: 20000, //20s后自动关闭
                    btn: ['是', '否'],
                    yes(index) {
                        layer.close(index);
                        location.assign('../html/login.html?returnUrl=./product.html');
                    }
                })
            }
        })
    }

    // 获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }
}

new Product;